// 节点操作
//     节点内容替换 ： innerHTML, innerText, textContent
//                  + 取值均为字符串 ，对指代标签内部的内容进行整体替换
//      基于JS dom 对象的节点操作
//          1. 删除已知节点
//          2. 创建新节点
//          3. 添加节点到指定位置
//          4. 替换指定节点
window.onload = function (){
//          1. 删除已知节点 : 在一个已知的父节点中删除指定节点
//             父节点.removeChild( 子节点 );
    let ulDom = document.querySelector("#ulDom")
    let liDom = document.querySelector("#ulDom>li:nth-child(3)");
    // document.removeChild(liDom) // 因为非父子节点关系无法删除
    ulDom.removeChild(liDom)
//          2. 创建新节点
//     document.createElement(tagName)  // 元素节点 JS DOM对象
//     document.createTextNode() // 文本节点
//     document.createComment() // 注释节点
    let newDivDom = document.createElement("div")
    newDivDom.classList.add("a","b")
    // 直接内容属性操作，完成节点添加
    // newDivDom.innerHTML = "文本值";
    // newDivDom.innerHTML = "<span>span1</span><span>span2</span>";

    // 创建子节点，通过 appendChild 方法添加子节点 （节点追加）
    let span1 = document.createElement("span");
    span1.innerText = "span1";
    let span2 = document.createElement("span");
    span2.innerText = "span2";
    let text = document.createTextNode("文本节点");
    let comm = document.createComment("注释节点")
    newDivDom.appendChild( span1 )
    newDivDom.appendChild( span2 )
    newDivDom.appendChild( text )
    newDivDom.appendChild( comm )
    console.log(newDivDom)

//          3. 添加节点到指定位置
//     父节点.appendChild( 子节点 )
//     父节点.append( ...子节点 )
    let liDom1 = document.createElement("li")
    liDom1.textContent = "新增元素1";
    ulDom.appendChild(liDom1);
    let liDom2 = document.createElement("li")
    liDom2.innerText = "新增元素2";
    let liDom3 = document.createElement("li")
    liDom3.innerText = "新增元素3";
    ulDom.append( liDom2,liDom3 );
//     父节点.insertBefore( 子节点,参考节点 )
    let liDom4 = document.createElement("li")
    liDom4.innerText = "新增元素4";
    // JS对与页面元素的操作，如果查询基于位置查询，必须注意参考页面结果，而非标签代码
    // let refLi = document.querySelector("#ulDom>li:nth-child(5)")
    let refLi = ulDom.querySelector("li:nth-child(5)")
    ulDom.insertBefore(liDom4,refLi)
//          4. 替换指定节点
//     父节点.replaceChild(newNode,replaceNode)
    let liDom5 = document.createElement("li");
    liDom5.innerText = "新增元素5";
    ulDom.replaceChild(liDom5,ulDom.querySelector("li:nth-child(7)"))
}
